<template>
  <div>
    <div class="header">
      <van-search
        class="searchBar"
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
      <div class="header-bar">
        <van-tabs>
          <van-tab title="综合">
          <van-list
          finished-text="没有更多了"
          :finished= finished
          @load="onLoad"
        >
              <div class="containner" v-for="item in videoList" :key="item.bvid" @click="toDetail(item.bvid)"> 
                <div class="left">
                  <img :src="item.pic" alt="" />
                  <div class="time">{{ item.duration }}</div>
                </div>
                <div class="right">
                  <div class="title" v-html="item.title"></div>
                  <div class="author">
                    <van-icon name="manager-o" />&nbsp;{{ item.author }}
                  </div>
                  <div class="watchmsg">
                    <van-icon name="play-circle-o" />&nbsp;{{ item.play }}
                  </div>
                </div>
              </div>
          </van-list>
          </van-tab>
          <van-tab title="用户">
            <div class="userWrap" v-for="user in userList" :key="user.mid">
              <div class="userLeft">
                <img :src="user.upic" alt="">
              </div>
              <div class="userRight">
                <div class="username">{{user.uname}} <div class="level">LV{{user.level}}</div></div>
                <div class="userMsg">{{user.fans}}粉丝&nbsp;&nbsp;{{user.videos}}个视频 </div>
                <div class="userDesc">{{user.usign}}</div>
              </div>
            </div>
            <div class="wrap-bottom">
                再怎么找也没有了
            </div>
          </van-tab>
          <van-tab title="影视">
            <div class="wrap" v-for="item in media" :key="item.media_id" @click="toMedia(item.goto_url)">
              <div class="wrap-left">
                <img :src="item.cover" alt="">
              </div>
              <div class="wrap-right">
                <div class="movie-title" v-html="item.title">
                </div>
                <div class="movie-msg">
                  <div class="movieTime">{{item.index_show}}</div>
                  <div class="actor">演员：{{item.cv}}</div>
                </div>
                <div class="score">
                  {{item.media_score.score}}
                  <div class="count-user">{{item.media_score.user_count}}人</div>
                </div>
                <!-- <div class="button">
                  <button>立刻观看</button>
                  <button>追剧</button>
                </div> -->
              </div>
            </div>
            <div class="wrap-bottom">
              再怎么找也没有了
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "@vue/runtime-core";
import { useRoute, useRouter } from "vue-router";
import { getSearchRes } from "@/api/index.js";

const route = useRoute();
const router = useRouter();
const value = ref("");
const keyword = ref("");
const videoList = ref([])
const media = ref([])
const userList = ref([])
const finished = ref(false)

const onSearch = (val) => {
  keyword.value = val;
  load(keyword.value)
};
const onCancel = () => {
  router.go(-1);
};
//发起请求
const load = (data) => {
    getSearchRes(data).then((res) => {
      // console.log(res.data.result);
      res.data.result.forEach(item => {
        if(item.result_type == 'media_ft'){
           media.value = item.data
          //  console.log(item);
        }
         if(item.result_type == 'bili_user'){
          userList.value = item.data
          // console.log(item);
        }
         if(item.result_type == 'video'){
          // console.log(item);
          videoList.value = item.data
          // console.log(item);
        }
      });
  });
}
//跳转详情页
const toDetail = (bvid) => {
  router.push({path:'/detail', query:{ Bvid: bvid } })
}
//影视跳转
const toMedia = (url) => {
  window.location.href = url
}
onMounted(() => {
  // console.log(route.query);
  value.value = route.query.keyword;
  load(route.query)
});
//触底
const onLoad = () => {
  if(videoList.value.length >= 20) {
    finished.value = true
  }
}
</script>

<style scoped>
.searchBar{
  position: fixed;
  width: 100%;
  z-index: 99;
}
.header-bar{
  padding-top: 40px;
}
  .containner {
  height: 100px;
  width: 100%;
  display: flex;
  margin: 10px 0 0;
  border-bottom: 1px solid #aaa;
}
.left {
  margin-left: 10px;
}
.left img {
  width: 170px;
  height: 95px;
  border-radius: 5px;
}
.time {
  position: relative;
  float: right;
  margin-top: -24px;
  color: #fff;
  margin-right: 15px;
}
.right {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 10px;
}
.title {
  width: 180px;
  height: 45px;
  font-size: 18px;
  word-wrap: break-word;
  word-break: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  /* white-space: nowrap;  */
}
.author,
.watchmsg {
  color: #aaa;
}
.wrap{
  display: flex;
  height: 140px;
  padding: 10px 10px;
  border-bottom: 0.5px solid #aaa;
}
.wrap img{
  width: 95px;
  height: 130px;
}
.wrap-right{
  margin-left: 6px;
  width: 180px;
  display: flex;
  flex-direction: column;
}
.wrap-left{
 margin-top: 5px;
}
.movieTime, .actor{
  height: 20px;
  width: 180px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
  color: #aaa;
}
.button{
  margin-top: 45px;
}
.score{
  position: absolute;
  margin-left: 50%;
  margin-top: 2%;
  color: rgb(232,183,86);
  font-size: 25px;
}
.count-user{
  font-size: 12px;
  color: #aaa;
}
.containner  >>> .keyword {
  color: pink;
  margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
.wrap >>> .keyword{
  color: pink;
  margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
.wrap-bottom {
  width: 100%;
  margin-top: 10px;
  color: #aaa;
  text-align: center;
}
.userWrap{
  display: flex;
  padding-left: 10px;
  padding-top: 10px;
}
.userLeft img{
  width: 60px;
  height: 60px;
  border-radius: 30px;
}
.userRight{
  margin-left: 10px;
}
.username{
  display: flex;
}
.level{
  color: red;
  margin-left: 20px;
}
.userMsg, .userDesc{
  color: #aaa;
  font-size: 14px;
}
</style>